//银行卡详情弹窗

import React, { useState } from 'react';
import { Button, Modal, message } from 'antd';
import { find } from 'lodash';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import CommonModal from '@/components/CommonModal';
import BankCardModal from '../BankCardModal/BankCardModal';
import BindNewBankCard from '../../../common/BindNewBankCard';
import BindCardList from '../../../common/BindCardList';
import BindTypeSelect from './BindTypeSelect';
import CommonLoading from '@/components/CommonLoading';
import styles from './index.module.less';
import { IdCardDesensitization } from '@/utils/utils.jsx';
import { relieveCard, queryPingAnAccount, personalRelieveCardOp } from '../../service';

const { confirm } = Modal;

const BankCardDetail = ({
  current,
  visible,
  bankListDetails,
  userAccountType,
  accountExtend,
  detailObj,
  handleCancel,
  updateBankState,
}) => {
  const [bankCardSwitch, setBankCardSwitch] = useState(false); // 见证宝绑卡
  // loading
  const [spinning, setpinning] = useState(false);
  const ccassIIAccount = find(bankListDetails, ['channelType', 1]) || {}; //二类户
  const OpenAccount = find(bankListDetails, ['channelType', 0]) || {}; //见证宝
  const [pingAnAccount, setPingAnAccount] = useState({}); //平安账户状态和绑卡信息
  const [modalVisibe, setModalVisible] = useState(false); //弹窗的visible

  const { accountNo, hasOpenAccount, hasOpenClassIIAccount } = userAccountType;

  //见证宝解除绑定
  const relieve = () => {
    if(detailObj.bindFlag){
      confirm({
        title: '提示',
        icon: <ExclamationCircleOutlined />,
        content:
          userAccountType?.hasOpenAccount == 1 &&
          userAccountType?.enterpriseAuthModifyState == 1
            ? ' 银行卡解绑后，不能再重新绑卡。如果需要重新绑卡，需要联系纺支宝升级账户，或者使用二类户。确定要解绑吗？'
            : '银行卡解绑后不能余额提现，确定要解绑吗？',
        async onOk() {
          setpinning(true);
          const { success, data } = await relieveCard({
            accountNo: accountNo,
            accountType: 1,
          });
          if (success) {
            message.success('银行卡解绑成功');
            updateBankState();
          }
          setpinning(false);
        },
      });
    }else{
      confirm({
        title: '提示',
        icon: <ExclamationCircleOutlined />,
        content: '确定解除绑定吗',
        async onOk() {
          setpinning(true);
          const { success, data } = await personalRelieveCardOp({ accountNo });
          if (success) {
            message.success('解绑成功');
            updateBankState();
          }
          setpinning(false);
        },
      });
  };
}

  //展开的账户信息
  const renderBankInfo = (obj, bool) => {
    if(detailObj.bankType == 3 && bool){
      return (<div className={styles.bankItem}>
        <div>
          <div>
            <span>支付宝账号：</span>
            <span>{obj.bankNo}</span>
          </div> <div>
            <span>支付宝姓名：</span>
            <span>{obj.name}</span>
          </div>
          </div>
      </div>)
    }
    return (
      <div className={styles.bankItem}>
        <div>
          <div>
            <span>开户银行：</span>
            <span>{obj.openBankName}</span>
          </div>
          {
            obj.subBankName && bool && (<div>
              <span>支行：</span>
              <span>{obj.subBankName}</span>
            </div>)
          }
          <div>
            <span>银行卡号：</span>
            <span>{obj.bankNo}</span>
          </div>
          <div>
            <span>开户人姓名：</span>
            <span>{obj.name}</span>
          </div>
          <div>
            <span>身份证号：</span>
            <span>{IdCardDesensitization(obj.idCardNo)}</span>
          </div>
          {
            obj.openAddress && bool && (<div>
              <span>开户地：</span>
              <span>{obj.openAddress}</span>
            </div>)
          }
          <div>
            <span>预留手机号：</span>
            <span>{obj.mobile}</span>
          </div>
          {obj.channelType == 1 && (
            <>
              <div>
                <span>单日充值限额：</span>
                <span>{obj.limitAmount}</span>
              </div>
              <div>
                <span>卡类型：</span>
                <span>{obj.bindCardLevel == 1 ? '安全卡' : '普通卡'}</span>
              </div>
              <div>
                <span>卡标志：</span>
                {obj.isSuperCard == 'Y' ? (
                  <span className="common-color9">超级卡</span>
                ) : (
                  <span>非超级卡</span>
                )}
              </div>
            </>
          )}
        </div>
      </div>
    );
  };

  // 查询平安账户状态和绑卡信息
  const getPingAnAccount = async (isCheck) => {
    setpinning(true);
    const res = await queryPingAnAccount();
    if (res.success) {
      const { data } = res;
      setPingAnAccount(data);
      if (isCheck) {
        if (data.bindcardList && data.bindcardList.length > 0) {
          //已绑卡
          setModalVisible('BindCardList');
        } else {
          setModalVisible('new');
        }
      }
    }
    setpinning(false);
  };

  //二类户绑卡
  const bindCard = () => {
    getPingAnAccount(true);
  };

  //见证宝银行卡绑定
  const BankCardModalProps = {
    bankCardSwitch,
    accountExtend,
    userAccountType,
    pageInit() {
      updateBankState();
    },
    //绑定银行卡弹窗关闭事件
    bankCardClose() {
      setBankCardSwitch(false);
    },
  };

  //二类户绑定银行卡列表
  const BindCardListProps = {
    noMesRequire: true, //无需验证码验证
    visible: modalVisibe == 'BindCardList',
    accountExtend,
    pingAnAccount,
    handleCancel() {
      setModalVisible(false);
    },
    handleOk() {
      updateBankState();
      setModalVisible(false);
    },
    handleUnBindOk() {
      //解绑卡
      getPingAnAccount(false);
    },
  };

  //二类户绑定新卡
  const BindNewBankCardProps = {
    accountExtend,
    pingAnAccount,
    handleOk() {
      updateBankState();
      setModalVisible(false);
    },
    handleCancel() {
      setModalVisible(false);
    },
  };

  const bindTypeModalProps = {
    accountNo,
    handleOk(){
      updateBankState();
      setModalVisible(false);
    },
    handleCancel(){
      setModalVisible(false);
    }
  }

  const handleBindClick = () => {
    if(current.autoState == 0 || accountExtend.accountType == 1){//个人见证宝直接进行线下虚拟绑卡
      setModalVisible('personalJZB');
    }else{
      setBankCardSwitch(true);
    }
  }

  return (
    <CommonModal
      title="银行卡信息"
      visible={visible}
      onCancel={handleCancel}
      forceRender={false}
      width={550}
      footer={<Button onClick={handleCancel}>关闭</Button>}
    >
      <div className={styles.box}>
        {hasOpenClassIIAccount == 1 && ccassIIAccount?.bankNo && (
          <>
            <div className={styles.boxHeader}>
              <div>二类户：</div>
              <Button onClick={bindCard}>换卡绑定</Button>
            </div>
            <div>{renderBankInfo(ccassIIAccount)}</div>
          </>
        )}
        {hasOpenAccount == 1 && OpenAccount && (
          <>
            <div className={styles.boxHeader}>
              <div>见证宝：</div>
              {OpenAccount.bankNo ? (
                <Button onClick={relieve}>解除绑定</Button>
              ) : (
                <Button onClick={handleBindClick}>去绑卡</Button>
              )}
            </div>
            {OpenAccount.bankNo && <div>{renderBankInfo(OpenAccount, true)}</div>}
          </>
        )}
        {(hasOpenClassIIAccount == 0 && hasOpenAccount == 0) ||
        (hasOpenAccount == 0 && !ccassIIAccount.bankNo) ? (
          <div className={styles.imgBox}>
            <img src="https://imgniu.zhaojiafang.com/front-web/ERP/noBank.png" />
            <div className={styles.imgBoxText}>暂无银行卡绑定，请先开户</div>
          </div>
        ) : (
          ''
        )}
      </div>
      <CommonLoading loading={spinning} />
      {bankCardSwitch && <BankCardModal {...BankCardModalProps}></BankCardModal>}
      {/* 二类户绑卡列表弹窗 */}
      {modalVisibe == 'BindCardList' && <BindCardList {...BindCardListProps} />}
      {/* 二类户绑定新卡 */}
      {modalVisibe == 'new' && <BindNewBankCard {...BindNewBankCardProps} />}
      {/* 常熟新用户自动开户 线下绑卡 */}
      {modalVisibe == 'personalJZB' && <BindTypeSelect {...bindTypeModalProps} />}
    </CommonModal>
  );
};

export default BankCardDetail;
